<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Welcome</title>
    <style type="text/css" media="screen">
        @import "resources/css/custom-theme/jquery-ui-1.8.16.custom.css";
        @import "resources/css/screen.css";
        @import "resources/css/app.css";
        @import "resources/css/jquery.asmselect.css";
    </style>
    <script type="text/javascript" src="resources/js/jquery-1.6.2.min.js"></script>
    <script type="text/javascript" src="resources/js/jquery-ui-1.8.16.custom.min.js"></script>
    <script type="text/javascript" src="resources/js/jquery.asmselect.js"></script>
    <!--Load the google AJAX API-->
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">

        // Load the Visualization API library and the piechart library.
        google.load('visualization', '1.0', {'packages':['corechart']});

        function handlePie(response) {
            if (response.isError()) {
                alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
                return;
            }
            var data = response.getDataTable();
            var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
            chart.draw(data, {width: 450, height: 300, title : 'Pace Breakdown'});
        }

        /**
         * Function to load the analytics to compare races.
         * Triggered by a change in the #races options
         *
         * Shows graphs for: Which race is faster course. Historical trend of pace.
         */
        function compareRaces() {
            var ajax_load = "<img src='resources/images/ui-anim_basic_16x16.gif' alt='loading...' />";
            var loadUrl = "comparerace";
            var ids = $('#races').val() + ',${race.id}';
            $("#comparecontainer")
                    .html(ajax_load)
                    .load(loadUrl, "ids="+ids);
        }

    </script>
    <style>
        .ui-autocomplete-loading { background: white url('resources/images/ui-anim_basic_16x16.gif') right center no-repeat; }
    </style>
    <script>
        $(document).ready(function() {
            $.getJSON("race?ajaxraceid=${race.id}",function(data) {
                addJsonElementsToTable(data);
            });


            //Add the event to load more data on scroll down.
            $(window).scroll(function(){
                if  ($(window).scrollTop() == $(document).height() - $(window).height()){
                    var cursor = $("#infiniteLoaderCursor").val();
                    if(cursor!='') {
                        $("#infiniteLoaderCursor").val(''); //stops multiple loads. Cursor will be set later if data returned
                        $.getJSON("race?ajaxraceid=${race.id}&cursor="+cursor,function(data) {
                            addJsonElementsToTable(data);
                        });
                    }
                }
            });

            var query = new google.visualization.Query('racevis?id=${race.id}');
            query.send(handlePie);

            $("select[multiple]").asmSelect({
                addItemTarget: 'bottom',
                animate: true,
                highlight: true,
                sortable: true
            });
            $( "#accordion" ).accordion({
                fillSpace: true
            });
            $( "#tabs" ).tabs();

        });

        /**
         * Add the data to the table and update the cursor
         * @param data
         */
        function addJsonElementsToTable(data)   {
            //update the loader
            if(data.elements.length>0) {
                $("#infiniteLoaderCursor").val(data.cursor);
                //add rows
                $.each(data.elements, function(i,element) {
                    var row = "<tr><td>"
                            + "<a href='athlete?id=" + element.athlete.raw.id + "'>" + element.recordedAthleteName + "</a></td><td>"
                            + element.place+"</td><td>"
                            + element.category+"</td><td>"
                            + element.club+"</td><td>"
                            + element.hours +":" + element.min + ":" + element.sec+"</td></tr>";
                    $(row).appendTo("#resultstablebody");
                });
            } else {
                $("#infiniteLoaderCursor").val('');
                $("#infiniteLoader").remove();

            }
        }
    </script>
</head>
<body>
<div id="header-thin" style="width:100%;">
<div class="span-10 push-2">
    </div>
    <div class="prepend-13 span-1 last">login</div>
</div>
<div class="container">
    <div id="searchbar" class="push-1">
        <jsp:include page="includes/searchbar.jsp" />
    </div>
    <div id="tabs" class="span-22 push-1">
        <ul>
            <li><a href="#tabs-1"><fmt:formatDate value="${race.date}" type="DATE" pattern="dd-MMM-yyyy"/> <c:out value="${race.name}"/></a></li>
            <li><a href="#tabs-2">Analytics</a></li>
        </ul>
        <div id="tabs-1">
            <table id="resultstable">
                <thead>
                <tr>
                    <th>Athlete</th>
                    <th>Placing</th>
                    <th>Cat</th>
                    <th>Club</th>
                    <th>Time</th>
                </tr>
                </thead>
                <tbody id="resultstablebody">
                </tbody>
            </table>
            <div id="infiniteLoader">
                <img src='resources/images/ui-anim_basic_16x16.gif' alt='loading...' />
                <input id="infiniteLoaderCursor" type="hidden" value="">
            </div>
        </div>
        <div id="tabs-2">
            <div id="accordion">
                <h3><a href="#">Pace Breakdown for all ${fn:length(results)} athletes</a></h3>
                <div>
                    <div id="chart_div"></div>
                </div>
                <h3><a href="#">Compare With</a></h3>
                <div>
                    <select id="races" multiple="multiple" name="races[]" title="Click to Select a Race" onchange="compareRaces()">
                        <c:forEach var="sameDistRace" items="${sameDistRaces}">
                            <option value="${sameDistRace.id}"><fmt:formatDate value="${sameDistRace.date}" type="DATE" pattern="dd-MMM-yyyy"/> ${sameDistRace.name}</option>
                        </c:forEach>
                    </select>
                    <div id="comparecontainer"/>
                </div>
            </div>
        </div>
    </div>
    <div class="span-5">
        <img src="http://code.google.com/appengine/images/appengine-noborder-120x30.gif" alt="Powered by Google App Engine" />
    </div>
</div>

</body>
</html>